<template>
	<view class="page content">
		<view class="contbox">
			<!-- <image class="logo-image" src="../../static/images/logo.png"></image> -->
			<view class="head">
				<image class="beijing" src="../../static/img/beijing.png"></image>
				<view class="head-text">
					<image class="logo-icon" src="../../static/img/logo.png"></image>
					<view class="head-title1"><text>欢迎登录</text>
						<image class="" src="../../static/img/paizhang.png"></image>
					</view>
					<view class="head-title2">知到了管理系统</view>
				</view>
			</view>
			<form @reset="formReset" class="formbox">
				<view class="itp-title">账号</view>
				<view class="uni-form-item uni-column">
					<input class="uni-input" name="username" v-model="username" placeholder="输入用户名/手机号/邮箱" />
				</view>
				<view class="itp-title">密码</view>
				<view class="uni-form-item uni-column uni-form-item-password">
					<input class="uni-input" type="password" name="password" v-model="password" placeholder="输入密码（6-20个数字或字母)" />
				</view>
				<view class="checkboxItem">
					<label @click="checkedChange">
						<checkbox style="transform: scale(0.7)" size="24rpx" color="#e47917" :checked="checkbox1" />
						<text>记住密码</text>
					</label>
				</view>
				<view class="uni-btn-v">
					<button @click="formSubmit">登录</button>
				</view>
			</form>
			<view class="footbox">浙江交建设工程管理平台</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				username: '',
				password: '',
				checkbox1: true, // 
			}
		},
		onLoad() {
			this.username = uni.getStorageSync('userName') || ''
			this.password = uni.getStorageSync('password') || ''
		},
		methods: {
			checkedChange() {
				this.checkbox1 = !this.checkbox1
				console.log(this.checkbox1)
			},
			formSubmit() {

				let formdata = {
					userName: this.username,
					password: this.password,

				}
				let loginCheckbox = this.checkbox1
				console.log('loginCheckbox', loginCheckbox)
				if (loginCheckbox) {
					uni.setStorageSync('userName', this.username)
					uni.setStorageSync('password', this.password)
				} else {
					uni.removeStorageSync('userName')
					uni.removeStorageSync('password');
				}
				console.log('提交的数据', formdata)
				if (formdata.userName == "" || formdata.userName == null || formdata.userName == undefined) {
					uni.showToast({ //  showModal
						title: '请输入账号',
						icon: 'none'
					});
					return
				}
				if (formdata.password == "" || formdata.password == null || formdata.password == undefined) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return
				}

				let _self = this;
				_self.$http.fetchData({
					url: '/wechatApplet/worker/login/',
					method: 'POSt',
					data: formdata,
					success(res) {
						
						if(res.code!=200){
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							return;
						}
						console.log('登录成功', res)
						uni.setStorageSync('token', res.access_token)
						uni.setStorageSync('user_info', JSON.stringify(res.data))
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/overview'
							}, 1000)
						})


					},
					fail(res) {

					},

				})


			},
			 

		}
	}
</script>

<style scoped>
	.content {}

	.page-bg {
		width: 750rpx;
		/* height: 100%; */
		/* height: 1624rpx; */
		position: relative;
		z-index: 0;
	}

	.contbox {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;
		overflow-x: hidden;
		z-index: 2;
	}

	.head {
		position: relative;
	}

	.beijing {
		width: 750rpx;
		height: 616rpx;
	}
	.logo-icon {
		width: 162rpx;
		height: 184rpx;
		/* background: #8f8f94; */
		display: block;
		margin:  0 auto;
	}
	.head .head-text {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 0 48rpx;
		padding-top: 120rpx;

	}

	.head-title1 {
		font-size: 70rpx;
		font-family: PingFang SC, PingFang SC-Semibold;
		font-weight: 600;
		color: #314566;
		margin-top: 26rpx;
	}

	.head-title1 image {
		width: 70rpx;
		height: 70rpx;
		display: inline-block;
		margin-left: 8rpx;
	}

	.head-title2 {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #a4a2ba;
		margin-top: 22rpx;
	}

	.logo-image {
		width: 454rpx;
		height: 125rpx;
		display: block;
		margin: 0 auto;
		margin-top: 448rpx;
	}

	.formbox {
		margin-top: -40rpx;
		display: block;
		box-sizing: border-box;
		padding: 60rpx 84rpx;
		padding-bottom: 270rpx;
		background: #fff;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		position: relative;
		z-index: 9;
	}
	.itp-title {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #323232;
		margin-bottom: 22rpx;
	}
	.uni-form-item {
		padding: 0 36rpx;
		margin-bottom: 48rpx;		
		height: 104rpx;
		background: #f6f9ff;
		border-radius: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #7e8898;
	}
	.uni-form-item-password {
		margin-bottom: 10rpx;
	}
	.icon-image {
		width: 29rpx;
		height: 32rpx;
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 44rpx;
		margin-top: -16rpx;
	}

	.uni-input {
		height: 104rpx;
	}

	.uni-btn-v {
		margin-top: 72rpx;
		text-align: center;
	}

	.uni-btn-v button {
		
		
		/* width: 590rpx; */
		height: 112rpx;
		background: #e47917;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
		line-height: 112rpx;
	}

	.checkboxItem {
		text-align: right;
		font-size: 24rpx;
		font-weight: 700;
		letter-spacing: 0rpx;
		line-height: 33.6rpx;
		color: #e47917;
		

	}

	.footbox {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 28rpx;
		font-size: 20rpx;
		font-weight: 500;
		letter-spacing: 0rpx;
		line-height: 28rpx;
		color: rgba(149, 152, 166, 1);
		text-align: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>